<template>
  <div id="member-List">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="已到期" name="first">
        <el-form :model="dueForm" ref="dueForm" class="dueForm" :inline="true" size="mini">
          <el-form-item label="姓名">
            <el-input v-model="dueForm.userName" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="激活时间" class="verify-time">
            <el-row>
              <el-col :span="11" class="time-width">
                <el-date-picker
                  v-model="dueForm.startTime"
                  type="datetime"
                  placeholder="选择开始日期"
                  default-time="00:00:00">
                </el-date-picker>
              </el-col>
              <el-col :span="1" class="time-span">~</el-col>
              <el-col :span="11" class="time-width">
                <el-date-picker
                  v-model="dueForm.endTime"
                  type="datetime"
                  placeholder="选择结束日期"
                  default-time="23:59:59">
                </el-date-picker>
              </el-col>
            </el-row>
          </el-form-item>
          <el-button type="primary" size="small" @click="search(0)">搜索</el-button>
          <!--<el-button type="primary" size="small" >下载</el-button>-->
        </el-form>

        <el-table
          class="style-a"
          :data="dueTableData"
          size="small"
          border
          style="width:100%"
          v-loading.body="loading1" element-loading-text="Loading">
          <el-table-column
            label="订单ID"
            align="center"
            prop="orderCode"
            min-width="80">
          </el-table-column>
          <el-table-column
            label="会员ID"
            align="center"
            prop="cardCode"
            min-width="130">
          </el-table-column>
          <el-table-column
            label="姓名"
            align="center"
            prop="userName"
            min-width="75">
          </el-table-column>
          <el-table-column
            label="身份证号"
            align="center"
            prop="idCard"
            min-width="130">
          </el-table-column>
          <el-table-column
            label="验证码号"
            align="center"
            prop="code"
            min-width="120">
          </el-table-column>
          <el-table-column
            label="照片"
            align="center"
            width="65">
            <template slot-scope="scope">
              <a href="javascript:void(0);" @click="checkPicture(scope.row.id)">查看</a>
            </template>
          </el-table-column>
          <el-table-column
            label="产品名称"
            prop="productName"
            align="center"
            min-width="80">
          </el-table-column>
          <el-table-column
            label="有效期"
            align="center"
            min-width="120">
            <template slot-scope="scope">
              <p>{{scope.row.startTime}}</p>
              <p>~</p> <p>{{scope.row.endTime}}</p>
            </template>
          </el-table-column>
          <el-table-column
            label="激活时间"
            prop="createTime"
            align="center"
            min-width="120">
          </el-table-column>
          <el-table-column
            label="价格（元）"
            prop="priceStr"
            align="center"
            min-width="70">
          </el-table-column>
          <el-table-column
            label="服务费（元）"
            prop="serviceChargeStr"
            align="center"
            min-width="75">
          </el-table-column>
          <el-table-column
            label="清分结算资金（元）"
            prop="settlement"
            align="center"
            min-width="80">
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange1"
          :current-page="currentPage1"
          :page-sizes="[20]"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="totalSize1">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="未到期" name="second">
        <el-form :model="notDueForm" ref="notDueForm" class="notDueForm" :inline="true" size="mini">
          <el-form-item label="姓名">
            <el-input v-model="notDueForm.userName" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="激活时间" class="verify-time">
            <el-row>
              <el-col :span="11" class="time-width">
                <el-date-picker
                  v-model="notDueForm.startTime"
                  type="datetime"
                  placeholder="选择开始日期"
                  default-time="00:00:00">
                </el-date-picker>
              </el-col>
              <el-col :span="1" class="time-span">~</el-col>
              <el-col :span="11" class="time-width">
                <el-date-picker
                  v-model="notDueForm.endTime"
                  type="datetime"
                  placeholder="选择结束日期"
                  default-time="23:59:59">
                </el-date-picker>
              </el-col>
            </el-row>
          </el-form-item>
          <el-button type="primary" size="small"  @click="search(1)">搜索</el-button>
          <!--<el-button type="primary" size="small" >下载</el-button>-->
        </el-form>

        <el-table
          class="style-a"
          :data="notDueTableData"
          size="small"
          border
          style="width:100%"
          v-loading.body="loading2" element-loading-text="Loading">
          <el-table-column
            label="订单ID"
            align="center"
            prop="orderCode"
            min-width="80">
          </el-table-column>
          <el-table-column
            label="会员ID"
            align="center"
            prop="cardCode"
            min-width="130">
          </el-table-column>
          <el-table-column
            label="姓名"
            align="center"
            prop="userName"
            min-width="75">
          </el-table-column>
          <el-table-column
            label="身份证号"
            align="center"
            prop="idCard"
            min-width="130">
          </el-table-column>
          <el-table-column
            label="验证码号"
            align="center"
            prop="code"
            min-width="115">
          </el-table-column>
          <el-table-column
            label="照片"
            align="center"
            width="65">
            <template slot-scope="scope">
              <a href="javascript:void(0);" @click="checkPicture(scope.row.id)">查看</a>
            </template>
          </el-table-column>
          <el-table-column
            label="产品名称"
            prop="productName"
            align="center"
            min-width="80">
          </el-table-column>
          <el-table-column
            label="有效期"
            align="center"
            min-width="120">
            <template slot-scope="scope">
              <p>{{scope.row.startTime}}</p>
              <p>~</p> <p>{{scope.row.endTime}}</p>
            </template>
          </el-table-column>
          <el-table-column
            label="激活时间"
            prop="createTime"
            align="center"
            min-width="120">
          </el-table-column>
          <el-table-column
            label="价格（元）"
            prop="priceStr"
            align="center"
            min-width="80">
          </el-table-column>
          <el-table-column
            label="服务费（元）"
            prop="serviceChargeStr"
            align="center"
            min-width="80">
          </el-table-column>
          <el-table-column
            label="清分结算资金（元）"
            prop="settlement"
            align="center"
            min-width="80">
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange2"
          :current-page="currentPage2"
          :page-sizes="[20]"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="totalSize2">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      title="照片查看"
      :visible.sync="centerDialogVisible"
      width="800px"
      center>
      <div class="imgList">
        <img :src="selfPicture" alt=""/>
        <img :src="idCardFront" alt=""/>
        <img :src="idCardOpposite" alt=""/>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
  import { getMemberList, getMemberPicture } from '@/api/memberList'
//  import ElDialog from '../../../node_modules/element-ui/packages/dialog/src/component.vue'
  export default {
//    components: {
//      ElDialog
//    },
    data() {
      return {
        loading1: false,
        loading2: false,
        selfPicture: '',
        idCardFront: '',
        idCardOpposite: '',
        centerDialogVisible: false,
        activeName: 'first',
        dueForm: {
          userName: null,
          startTime: null,
          endTime: null
        },
        notDueForm: {
          userName: null,
          startTime: null,
          endTime: null
        },
        dueTableData: [],
        notDueTableData: [],
        currentPage1: 1,
        totalSize1: null,
        currentPage2: 1,
        totalSize2: null
      }
    },
    created() {
      this.getMemberList(0)
    },
    methods: {
      checkPicture(id) {
        getMemberPicture(id).then(res => {
          let data = res.data
          if (data.errorCode === 'E_000') {
            this.selfPicture = data.body.userImage
            this.idCardFront = data.body.idImageFront
            this.idCardOpposite = data.body.idImageBack
            this.centerDialogVisible = true
          }
        })
      },
      handleClick(tab, event) {
        if (tab.index == 1) {
          this.getMemberList(1)
        } else {
          this.getMemberList(0)
        }
      },
      search(status) {
        if (status == 1) {
          this.currentPage2 = 1
          this.getMemberList(1)
        } else {
          this.currentPage1 = 1
          this.getMemberList(0)
        }
      },
      getMemberList(status) {
        let params = {}
        if (!status) {
          params = {
            pageNumber: this.currentPage1,
            pageSize: 20,
            startTime: new Date(this.dueForm.startTime).getTime() || null,
            endTime: new Date(this.dueForm.endTime).getTime() || null,
            userName: this.dueForm.userName || null,
            status: status
          }
          this.loading1 = true
          getMemberList(params).then(res => {
            let data = res.data
            this.loading1 = false
            if (data.errorCode === 'E_000') {
              this.dueTableData = data.body.list
              this.totalSize1 = data.body.total
            }
          }).catch(() => {
            this.loading1 = false
          })
        } else {
          params = {
            pageNumber: this.currentPage2,
            pageSize: 20,
            startTime: new Date(this.notDueForm.startTime).getTime() || null,
            endTime: new Date(this.notDueForm.endTime).getTime() || null,
            userName: this.notDueForm.userName || null,
            status: status
          }
          this.loading2 = true
          getMemberList(params).then(res => {
            let data = res.data
            this.loading2 = false
            if (data.errorCode === 'E_000') {
              this.notDueTableData = data.body.list
              this.totalSize2 = data.body.total
            }
          }).catch(() => {
            this.loading2 = false
          })
        }
      },
      handleCurrentChange1(val) {
        this.currentPage1 = val
        this.getMemberList(0)
      },
      handleCurrentChange2(val) {
        this.currentPage2 = val
        this.getMemberList(1)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  #member-List{
    .verify-time{
      .el-form-item__content{
        width: 480px;
      }
      .time-width{
        width: 220px;
      }
      .time-span{
        text-align: center;
      }
    }
    .el-dialog{
      .imgList{
        width:100%;
        img{
          width:32.9%;
          height:280px;
          padding:0 5px;
          display:inline-block;
        }
      }
    }

  }
</style>
